<template>
	<view class="gui-img-crop">
		<view class="gui-cropper-wrapper" 
		:style="{height:height + 'px', width:width+'px'}">
			<canvas canvas-id="bgCropper" id="bgCropper"
			class="gui-cropper-bg" :disable-scroll="true"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
			:style="{width:width+'px', height:height+'px'}"></canvas>
			<canvas canvas-id="prevCropper" id="prevCropper" 
			class="gui-cropper-prev" :disable-scroll="true"></canvas>
		</view>
		<view class="gui-flex gui-rows gui-nowrap gui-bg-black">
			<view class="gui-cropper-btn" @tap="selectImg">+ 选择图片</view>
			<view class="gui-cropper-btn" @tap="saveImg">保存头像</view>
		</view>
	</view>
</template>
<script>
	let graceJS = require('@/lizhili/js/grace.js');
	let common = require('@/common.js');
import WeCropper from '@/lizhili/js/WeCropper.js';
export default {
	data() {
		return {
			// WeCropper 对象
			WeCropper    : null,
			// 核心宽度系统会重新计算
			width        : 300,
			// 核心高度系统会重新计算
			height       : 500,
			// 剪裁设置对象
			cropperSets  : {
				height   : 500,
				width    : 300,
				id       : 'bgCropper',
				targetId : 'prevCropper',
				scale    : 2.5,  // 最大缩放倍数
				zoom     : 8,    // 缩放系数
				cut      : {
				  x      : 0,   // 裁剪框x轴起点
				  y      : 0,   // 裁剪框y轴期起点
				  width  : 200, // 裁剪框宽度
				  height : 200  // 裁剪框高度
				}
			}
		}
	},
	onLoad:function(){
		// 获取屏幕信息规划剪裁组件宽度和高度
		const sysinfo               = uni.getSystemInfoSync();
		this.width                  = sysinfo.windowWidth;
		this.height                 = sysinfo.windowHeight - 50;
		this.cropperSets.width      = this.width;
		this.cropperSets.height     = this.height;
		this.cropperSets.pixelRatio = sysinfo.pixelRatio;
		this.cropperSets.cut.x      = (this.width  - this.cropperSets.cut.width) / 2;
		this.cropperSets.cut.y      = (this.height - this.cropperSets.cut.height) / 2;
		this.WeCropper = new WeCropper(this.cropperSets);
	},
	methods:{
		selectImg : function () {
			uni.chooseImage({
				count      : 1, 
				sizeType   : ['compressed'],
				sourceType : ['album', 'camera'],
				success    : (res) => {
					this.WeCropper.pushOrign(res.tempFilePaths[0]);
				}
			});
		},
		touchStart(e) {
			this.WeCropper.touchStart(e);
		},
		touchMove(e) {
			this.WeCropper.touchMove(e);
		},
		touchEnd(e) {
			this.WeCropper.touchEnd(e);
		},
		saveImg : function() {
			uni.showLoading({mask:true, title:""});
			this.WeCropper.getCropperImage((tempFilePath) => {
				if (tempFilePath) {
					//console.log(tempFilePath);
					const token = uni.getStorageSync('token');
					uni.uploadFile({
						url: common.apiServer + 'update',
						filePath: tempFilePath,
						name: 'file',
						formData: {
							lizhili: '0d89b868429be6158ba1ebc0f7c073de',
							type: 'update_my_img',
							token: token
						},
						success: (uploadFileRes) => {
							let data=JSON.parse(uploadFileRes.data)
							if(data.code==1){
								uni.navigateBack()
							}else{
								uni.showToast({
									title: '修改失败',
									icon: "none"
								});
							}
						}
					});
				} else {
					console.log('获取图片地址失败，请稍后重试')
				}
				uni.hideLoading();
			});
		},
	}
}
</script>
<style>
.gui-img-crop{width:750rpx; background:url(''); height:100%; position:fixed; z-index:90; left:0; top:0;}
/* #ifdef H5 */
.gui-img-crop{top:44px;}
/* #endif */
.gui-cropper-wrapper{overflow:hidden;}
.gui-cropper-bg{}
.gui-cropper-prev{}
.gui-cropper-btn{width:50%; text-align:center; line-height:50px; font-size:28rpx; color:#FFFFFF;}
</style>